<template>
  <div>
    <div class="main">
      <div class="topCenter">
        <div class="title">数据总览</div>
        <div style="display: flex">
          <div class="dataItem">
            <div class="dataTitle">咨询数</div>
            <div class="todayData"><span class="bigNum">{{dayData.number}}</span>今日</div>
            <div class="allData">共<span class="decimal">{{dayData.total}}</span></div>
          </div>
          <div class="dataItem">
            <div class="dataTitle">访问人数</div>
            <div class="todayData"><span class="bigNum">{{dayData.visit}}</span>今日</div>
            <div class="allData">共<span class="decimal">{{dayData.totalVisit}}</span></div>
          </div>
          <div class="dataItem">
            <div class="dataTitle">咨询时长(小时)</div>
            <div class="todayData"><span class="bigNum">{{dayData.duration}}</span>今日</div>
            <div class="allData">共<span class="decimal">{{ dayData.totalDuration }}</span></div>
          </div>
        </div>
      </div>
      <div class="downCenter">
        <div class="left">
          <div class="top">
            <div class="mainTitle">咨询人数</div>
            <div class="topDate">
              <el-date-picker
                style="width: 80%"
                v-model="value1"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>

            </div>
          </div>
          <div class="chartBox">
            <div id="histogram"></div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="mainTitle">男女比例</div>
            <div class="topDate">
              <el-date-picker
                style="width: 80%"
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>
          <div class="chartBox">
            <div id="pieChart1"></div>
            <div id="pieChart2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

import { histogram, pieChart1, pieChart2} from "@/utils/homepage";
import {dailyData, histogramobj, pieSexChart} from "@/api/system/dict/home";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      // 日期设置
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      dayData:'',
      Time:{
        startTime:'2023-11-07',
        endTime:'2023-12-08'
      },
    //  饼状图数据
      listPie:{},

    };
  },
  created() {
    //首页数据每日数据
    dailyData().then(res=>{
      this.dayData = res.data
      // console.log(res)
    })
    //柱状图数据
    histogramobj(this.Time).then(res=>{
      // console.log(res)
    })
    // 饼状图数据
    pieSexChart(this.Time).then(res=>{
      this.listPie=res.data
      // 饼状图男女
      this.getPieChart1(this.listPie)
      // 研究生本科生
      this.getPieChart2(this.listPie)
    })


  },
  mounted() {
    // 柱状图
    this.getHistogram()
  },
  methods: {
    // 柱状图
    getHistogram(){
      let histogramChart = this.$echarts.init(document.getElementById('histogram'));
      histogramChart.setOption(histogram())
    },
    //饼状图男和女
    getPieChart1(data){
      let histogramChart = this.$echarts.init(document.getElementById('pieChart1'));
      histogramChart.setOption(pieChart1(data.man,data.woman))

    },
    //饼状图研究生和本科生
    getPieChart2(data){
      let histogramChart = this.$echarts.init(document.getElementById('pieChart2'));
      histogramChart.setOption(pieChart2(data.bachelor,data.master))
    },

  },

};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;

}
.main{
  min-width: 1000px;
  padding: 25px 44px 25px 28px;
}
.topCenter{
  .title{
    font-size: 18px;
    font-weight: 700;
    color: #101010;
  }
  .dataItem{
    margin: 37px 46px 0 0;

    width: 260px;
    height: 150px;
    border: 1px solid #bbb;
    padding: 15px 27px 0;
    .dataTitle{
      font-size: 16px;
    }
    .todayData{
      .bigNum{
        font-size: 32px;
        padding-left: 53px;
      }
      padding: 22px 0 23px;
      font-size: 14px;
    }
    .allData{
      .decimal{
        font-size: 14px;
      }
    }
  }

}
.downCenter{
  margin-top: 69px;
  display: flex;
  .left{
    width: 50%;
    padding-right: 3%;
    position: relative;
    .top{
      width: 100%;
      display:  flex;
      padding-right: 3%;
      .mainTitle{
        width: 50%;
        font-size: 18px;
        font-weight: 700;
        color: #101010;
      }
      .topDate{
        width:50% ;
      }
    }
    .chartBox{
      position: relative;
      width: 569px;
      height: 350px;
      padding: 0;
      margin: 0;
      border-width: 0;
      cursor: default;
      #histogram{
        height: 300px;
        width: 500px;
      }
    }
  }
  .right{
    width: 50%;
    padding-right: 3%;
    position: relative;
    .top{
      width: 100%;
      display:  flex;
      padding-right: 3%;
      .mainTitle{
        width: 50%;
        font-size: 18px;
        font-weight: 700;
        color: #101010;
      }
      .topDate{
        width:50% ;
      }
    }
    .chartBox{
      display: flex;
      position: relative;
      width: 569px;
      height: 350px;
      padding: 0;
      margin: 0;
      border-width: 0;
      cursor: default;
      #pieChart1{
        height: 300px;
        width: 230px;
      }
      #pieChart2{
        height: 300px;
        width: 250px;
      }
    }

  }
}

</style>

